<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{padding:0px; margin:0px;}
body{background:#d9ba83;}
.photo{width:1000px; margin:50px auto;}
.photo li{float:left; list-style:none; background:white; margin:15px;transform:rotate(-2deg); padding:10px 10px; text-align:center; transition:all 300ms}
.photo li:nth-child(even){transform:rotate(2deg)}
.photo li a {font-size:18px; color:#666; text-decoration:none;}
.photo li a img{width:200px; height:200px; display:block}
.photo li a:after{content:attr(title); margin-top:10px; display:block}
.photo li:hover{transform:scale(1.5); position:relative; z-index:999;}
</style>
</head>

<body>
<div class="photo">
	<ul>
    	<li><a href="javascript:;" title="111"><img src="images/1.jpg"></a></li>
    	<li><a href="javascript:;" title="222"><img src="images/2.jpg"></a></li>
    	<li><a href="javascript:;" title="333"><img src="images/3.jpg"></a></li>
    	<li><a href="javascript:;" title="444"><img src="images/4.jpg"></a></li>
    	<li><a href="javascript:;" title="555"><img src="images/5.jpg"></a></li>
    	<li><a href="javascript:;" title="666"><img src="images/6.jpg"></a></li>
    	<li><a href="javascript:;" title="777"><img src="images/7.jpg"></a></li>
    	<li><a href="javascript:;" title="888"><img src="images/8.jpg"></a></li>
    	<li><a href="javascript:;" title="999"><img src="images/9.jpg"></a></li>
    </ul>
</div>
</body>
</html>
